//1.导航数组
let arr = ['小说', '青春动漫', '经济管理', '历史文化', '人文社科', '育儿教育', '旅游美食', '中小学辅导', '外语考试', '文学艺术', '成功励志'];
//2.书籍数组
let bookList = [
    {
        id: 1,
        name: '狼图腾(修订版)',
        subPrice: 19.9,
        normalPrice: 39.9,
        imgSrc: '../img/langtut.jpg'
    },
    {
        id: 2,
        name: '大数据时代',
        subPrice: 29.9,
        normalPrice: 49.9,
        imgSrc: '../img/dashuju.jpg'
    },
    {
        id: 3,
        name: '明朝那些事儿',
        subPrice: 39.9,
        normalPrice: 59.9,
        imgSrc: '../img/mingchaonxs.jpg'
    },
    {
        id: 4,
        name: '目送',
        subPrice: 49.9,
        normalPrice: 69.9,
        imgSrc: '../img/musong.jpg'
    },
    {
        id: 5,
        name: '皮囊',
        subPrice: 69.9,
        normalPrice: 199.9,
        imgSrc: '../img/pinang.jpg'
    },
	{
		id: 6,
		name: '小王子',
		subPrice: 69.9,
		normalPrice: 199.9,
		imgSrc: '../img/xiaowangz.jpg'
	}
];

//3.添加购物车的方法
function buy(id) {
    let cart = window.sessionStorage.getItem('cart') || [];
    cart.push(bookList[id - 1]);
    window.sessionStorage.setItem('cart', JSON.stringify(cart));
}

//4.拼接导航列表
function navigate(){
    let bookListGroup = $('.book-list-group');
    bookListGroup.empty();
    $(arr).each(function(index, item) {
        let bookListItem = `
          <div class="book-list-item">
            <a href="#" class="list-item-link">
              <span class="link-text">${item}</span>
              <span class="link-arrow">&gt;</span>
            </a>
          </div>`;
        bookListGroup.append(bookListItem);
    })
}

//5.拼接图书列表
function book(){
    //图书列表
    let booksGroup = $('.books-group');
    booksGroup.empty();
    $(bookList).each(function(index, item) {
        let book = `
          <div class="book">
            <div class="book-wrap">
              <!-- 上面的图片 -->
              <a href="#" class="book-link">
                <img src="${item.imgSrc}" alt=""/>
              </a>
              <!-- 中间的文字 -->
              <div class="book-name">${item.name}</div>
              <!-- 底部的价格购买按钮 -->
              <div class="operate">
                <div class="price">
                  <span class="sub-price">￥${item.subPrice}</span>
                  <span class="normal-price">￥${item.normalPrice}</span>
                </div>
                <div class="buy" onclick="buy(${item.id})">
                  <div>点击</div>
                  <div>购买</div>
                </div>
              </div>
            </div>
          </div>
          `;
        booksGroup.append(book);
    });
}

function buy(index){
    let alert=document.getElementsByClassName('alert');
    $(".alert").css("display","block");
    let count=3;
    let time = setInterval(function () {
        count--;
        if(count<0){
            return;
        }
        $(".alert").css("display","none");
    },1000);
    setTimeout(function () {
        clearInterval(time);
        time = null;
    },3000);
}

//6.jq的工厂函数
$(function() {
    navigate();
    book();
});
